<!--
 * @Descripttion: 角色列表页
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-07 06:07:24
 -->
<template>
  <div class="app-container">
    <el-card shadow="never" class="oper-btn-card">
      <el-button type="primary" @click="btnAddData">新增角色</el-button>
    </el-card>
    <div>
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.table"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :columns="columnsData"
        :data="tableData.table"
        @edit-closed="onEditClosed"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
    <el-dialog
      v-if="dialogVisible"
      title="角色"
      :visible.sync="dialogVisible"
      destroy-on-close
      append-to-body
    >
      <save-role ref="saveRole" :data="currentRow" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading.save" @click="btnSaveData">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { getDelButton, getUpdateButton, getUmbrellaButton } from '@/components/Table/oper-btns.js'
import { saveData, delListData, listData } from '@/api/sys/role.js'
import SaveRole from './save-role.vue'

export default {
  name: 'RoleList',
  filters: {
  },
  components: { SaveRole },
  mixins: [oftenuse],
  data() {
    return {
      searchData: {},
      dialogVisible: false,
      currentRow: {},
      columnsData: [
        { title: '操作', width: 160,
          slots: {
            default: (params) => {
              const { row } = params
              const tenantId = row.tenantId
              if (tenantId === '0') return []
              const h = this.$createElement
              const delBtnNode = getDelButton(h, { on: { click: () => { this.btnDelData(row) } }})
              const updateBtnNode = getUpdateButton(h, { props: { type: 'primary' }, on: { click: (e) => { this.btnUpdateData(row) } }})
              const permissionBtnNode = getUmbrellaButton(h, { props: { type: 'primary' }, on: { click: (e) => { this.btnSetupUmbrella(row) } }})
              const divNode = h('div', {
                attrs: {
                  class: 'table-oper-btns'
                }
              }, [permissionBtnNode, updateBtnNode, delBtnNode])
              return [divNode]
            }
          }
        },
        { field: 'roleName', title: '角色名称', editRender: { name: 'ElInput' }, width: 150 },
        { field: 'remark', title: '角色描述', editRender: { name: 'ElInput' }, width: 700 }
      ]
    }
  },
  watch: {
  },
  created() {
    this.getRoleList()
  },
  methods: {
    btnAddData() {
      this.currentRow = {}
      this.dialogVisible = true
    },
    btnUpdateData(row) {
      this.dialogVisible = true
      this.currentRow = row
    },
    btnSetupUmbrella(row) {
      const { id, roleName } = row
      this.$router.push({
        name: 'RolePermissions',
        query: { id, roleName }
      })
    },
    btnSaveData() {
      this.setBtnLoading('save', true)
      this.$refs.saveRole.saveData().then(res => {
        this.setBtnLoading('save', false)
        this.getRoleList()
        this.dialogVisible = false
      })
    },
    // table btns
    btnDelData(row) {
      this.$confirm('确定要删除该角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delListData([row.rId])
      }).catch(() => {
      })
    },
    // api
    getRoleList(params = { page: this.pageInfo, data: {}}) {
      this.setTableLoading('table', true)
      listData(params).then(res => {
        this.setTableLoading('table', false)
        if (!res.data.flag) return
        const { records, total } = res.data.data
        this.setTableData('table', records)
        this.pageInfo.total = total
      })
    },
    delListData(roleId) {
      delListData(roleId).then(res => {
        if (res.data.flag) {
          this.$notify.success({ title: '删除成功!' })
          this.getRoleList()
        } else {
          this.$notify.error({ title: '删除失败!', message: res.data.message })
        }
      })
    },
    saveData(params) {
      saveData(params).then(res => {
        if (res.data.flag) {
          this.$notify.success({ title: '保存成功!' })
          this.getRoleList()
        } else {
          this.$notify.error({ title: '保存失败!', message: res.data.message })
        }
      })
    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('store', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.getRoleList()
    },
    onEditClosed(params, val) {
      const { row } = params
      this.saveData(row)
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.getRoleList()
    }
  }
}
</script>
<style scoped>

</style>
